MyBB-Plugins Forums

Full Version: Customizing Newpoints Shop
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hey everyone,

I recently updated my site, adding Newpoints and Shop to it. I wanted to show off an example of a customization that I did with the site.

Category Example:
[attachment=1243]

Categories are positioned at the top as images. Hovering over the image flips it around, and displays information, such as how many items are in the section. For the flip effect, I used a tutorial at the site: http://davidwalsh.name/css-flip

When the image is clicked, that category is shown, hiding any other categories.

I chose this category to also display how a Free item is shown compared to items to purchase. I use a random number generator to pick a different free item each week, and make manual changes as needed.

If an item has a limit, and is sold out, the box would be displayed red, and the button would not be there, instead text stating "Sold Out". I do not have any of these right now with my shop.



Code Changes
Template: newpoints_shop

Style for Flip Effect:
Code:
<style>
#f2_container {float:left;width:105px;height:225px;margin-right:6px;cursor:pointer;}
#f2_container {perspective:1000px;-webkit-perspective: 1000px;-moz-perspective: 1000px;-ms-perspective: 1000px;}
#f2_card {width:100%;height:100%;transform-style: preserve-3d;-webkit-transform-style: preserve-3d;transition: all 0.5s linear;border:1px solid #317EB2;}
#f2_container:hover #f2_card {transform: rotateY(180deg);-moz-transform: rotateY(180deg); -o-transform: rotateY(180deg);-webkit-transform: rotateY(180deg);transform: rotateY(180deg);filter: FlipH;-ms-filter: "FlipH";}
#f2_container:hover {display:none;}
.face {position:absolute;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;}
.face.back {display:block;transform: rotateY(180deg);-moz-transform: rotateY(180deg); -o-transform: rotateY(180deg);-webkit-transform: rotateY(180deg);transform: rotateY(180deg);filter: FlipH;-ms-filter: "FlipH";box-sizing: border-box;}

Image Link:
Code:
<div id="f2_container" onclick="switch1('Category Name 1'); return false;"><div id="f2_card" class="shadow">
<div class="front face"><img src="front image link" height="225" width="105"></div>
<div class="back face center smalltext"><strong>Total Items: 25
<span style="position:absolute;bottom:0;margin-bottom:5px;right:0;margin-right:20px;">Shop Now</span></strong>
</div></div></div>

The primary thing with the image link is the (onclick="switch1('Category Name 1'); return false;"). If you do not want the flip effect, you can achieve the same thing by using the onclick code and information below.



Template: newpoints_shop_category

Toggle Category Script
Code:
<script type="text/javascript">function switch1(div){if (document.getElementById('Category Name 1')){var option=['Category Name 1','Category Name 2','Category Name 3'];for(var i=0; i<option.length; i++){obj=document.getElementById(option[i]);obj.style.display=(option[i]==div)? "block" : "none";}}}</script>

Visible / Hidden Categories
Code:
<if $category['name'] == "Category Name 1" then><div id="{$category['name']}" class="visible" style="width:890px;float:left;">
<else>
<div id="{$category['name']}" class="hidden" style="width:890px;float:left;">
</if>
<table class="forumcontain" cellspacing="5px">
<tr><td class="forumhead" colspan="4">
<div style="margin-left:5px;"><strong>{$category['name']}</strong></div>
</td></tr><tr><td>
{$items}
</td></tr></table>
</div>

For the Visible / Hidden categories, the first one listed within the if statement will be visible upon going to the page. Others will be hidden.

Then by placing the onclick code, referencing the script function "switch1" within the images in the shop template, each section will be displayed on demand.


I hope the information above may help someone with some customization of their shop. If there are any questions about the information above, reply here or contact me at my site, below.

You can also join my site and check this out yourself at, http://www.amongshadows.com/
Thank you Smile
this is a nice idea mate, thanks for this
That looks great. Great job on the modification. Smile