ShopSite Forums

Your source for ShopSite user collaboration
https://forum.shopsite.com/

Custom Content Filter

https://forum.shopsite.com/viewtopic.php?f=11&t=10577

Page 1 of 1

Custom Content Filter

PostPosted: Wed Jan 28, 2015 1:48 am
by Kapitol
I am looking for a way to add a Custom Content Filter to a page on our store. I need way to tag each product by color. I thought about just using the product name as that filter, but we have several products that have unique color names so that won't work. We want to group products colors like aquamarine into Blue, etc.

I thought that if I added the template code for Product Field 1 in the class="" I could do that. Then on each product page in the textbox "Product Field 1", I could enter the color name of my choice.

The results of that in the HTML code are:
Code: Select all
<div class="blocks col-md-3 col-sm-6 col-xs-12 Product Field 1 " style="position: absolute; left: 0px; top: 0px;">


I think it is weird that instead of using what I have in that textbox field on the product page in the Product Field 1, it is instead using the word "Product Field 1". Clearly I am doing something wrong. My code looks like this:
Code: Select all
<div class="blocks col-md-3 col-sm-6 col-xs-12 [-- STORE.ProductField1 --] ">


I also tried using this template code "[-- PRODUCT.Field1 --]" and with using this, nothing shows up.

Re: Custom Content Filter

PostPosted: Wed Jan 28, 2015 9:57 am
by ShopSite Lauren
[-- STORE.ProductField1 --] uses the name of the product field found under Preferences > Extra Fields.

You will want to use [-- PRODUCT.Field1 --]. My guess is that the product you looked at when using that option didn't have anything in product field 1.

I would suggest using an IF statement so that if there is something in the product field 1, it will use that.
[-- IF PRODUCT.Field1 --] [-- PRODUCT.Field1 --][-- END_IF --]

Re: Custom Content Filter

PostPosted: Wed Jan 28, 2015 12:14 pm
by Kapitol
I actually do have copy inside the Product Field 1 for the products I am testing.
After, col-xs-12, is where the code below sits.
[-- IF PRODUCT.Field1 --] [-- PRODUCT.Field1 --][-- END_IF --]
I get this:
Code: Select all
<div class="blocks col-md-3 col-sm-6 col-xs-12  " style="position: absolute; left: 0px; top: 0px;">


You can see it live at
Code: Select all
http://www.artandsoulbeads.com/store/swarovski_crystal_cubes_5601.html


Since this doesn't seem to work, do you know of another way I can add a custom category class to each product?

Re: Custom Content Filter

PostPosted: Wed Jan 28, 2015 12:29 pm
by Kapitol
http://imgur.com/lDGdZqI

I took this screen to show you what I am inputting into the field. This for the product, Swarovski Cube 8mm Trio: Black Tie. Beyond merely Publishing the changes I also Regenerate the entire store.

Re: Custom Content Filter

PostPosted: Thu Jan 29, 2015 11:01 am
by Kapitol
I have been experimenting with product.field's and I can't get this thing to work anywhere on this page. Am I missing a prerequisite in the page somewhere to get one of these working?
Code: Select all
[-- DEFINE LINK_TO_PAGE --]
<a href="[-- OUTPUT_DIRECTORY_URL --]/[-- PAGE.FileName --]">
[-- IF PAGE.LinkGraphic --][-- PAGE.LinkGraphic --]
[-- END_IF --]
[-- IF PAGE.LinkName --][-- PAGE.LinkName --][-- ELSE --][-- PAGE.Name --][-- END_IF --]
[-- IF PAGE.LinkText --]
[-- PAGE.LinkText --][-- END_IF --]
[-- END_DEFINE LINK_TO_PAGE --]

[-- DEFINE PAGE --]
<!DOCTYPE html>

<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>    <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>    <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class=""> <!--<![endif]-->
<head>
[-- IF PAGE.Title --]
  <title>[-- PAGE.Title --]</title>
[-- ELSE --]
  <title>[-- PAGE.Name --]</title>
[-- END_IF --]
<style>body {font-size: 14px;line-height: 1.42857143;color: #777;background-color: #e2e2e2;}</style>
[-- IF PAGE.MetaKeywords --]
<meta name="keywords" content="[-- PAGE.MetaKeywords --]">
[-- END_IF --]

[-- IF PAGE.MetaDescription --]
<meta name="description" content="[-- PAGE.MetaDescription --]">
[-- END_IF --]
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="[-- OUTPUT_DIRECTORY_URL --]/media/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="[-- OUTPUT_DIRECTORY_URL --]/media/crystal.css" />
<script type="text/javascript" src="[-- OUTPUT_DIRECTORY_URL --]/media/modernizr.custom.42216.js"></script>
<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Roboto+Slab:400,300:latin', 'Open+Sans:300italic,400,300,700,800:latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>
<!--[if lte IE 7]><link rel="stylesheet" href="[-- OUTPUT_DIRECTORY_URL --]/media/ies.css" type="text/css" media="screen"/><![endif]-->
<!--[-- OUTPUT_DIRECTORY_URL --]/-->
<script type="text/javascript">
(function() {
var hm = document.createElement('script'); hm.type ='text/javascript'; hm.async = true;
hm.src = ('++u-heatmap-it+log-js').replace(/[+]/g,'/').replace(/-/g,'.');
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(hm, s);
})();
</script>
</head>
<body class="home-page">
<script>
    // Masony
        $('#setup').masonry({
            itemSelector: '.blocks'
    });
    </script>   
<div id="page" class="container-fluid">   
[-- INCLUDE Boostrap-Menu PROCESS --]
<div class="row">
    <div class="adspace"></div>
    </div>   
<div class="row">   
<div class="container home-cont">
<div class="row">
 [-- IF PAGE.DisplayName --]
  [-- IF PAGE.Name --]
   <h1 itemprop="name">[-- PAGE.Name --]</h1>
  [-- END_IF --]
 [-- END_IF --]
 [-- IF PAGE.Text1 --]
  <p itemprop="description">[-- PAGE.Text1 --]</p>
 [-- END_IF --]
 </div>
<div class="row fullback lineui">
<div class="breadcru col-md-7" itemprop="breadcrumb"><a href=[-- MyStoreURL --]>[-- STORE.Home --]</a> &rsaquo; <a href="[-- OUTPUT_DIRECTORY_URL --]/beads.html">Beads</a> &rsaquo; Swarovski &rsaquo; [-- PAGE.Name --]</div>
[-- IF PAGE.ProductsPerPage "0" --]
 [-- ELSE --]
  <div class="pagination col-md-3">[-- PREVNEXT --]</div>
 [-- END_IF --]
 <div class="catmenu col-md-2">
 <span><img src="[-- OUTPUT_DIRECTORY_URL --]/media/menu.png"> Swarovski Menu</span>
 <ol>
    <li><a href="[-- OUTPUT_DIRECTORY_URL --]/swarovski_crystal_cubes_5601.html">Cubes</a></li>
    <li><a href="[-- OUTPUT_DIRECTORY_URL --]/swarovski_crystal_saucers_5305.html">Saucers</a></li>
    <li><a href="[-- OUTPUT_DIRECTORY_URL --]/swarovski_crystal_top_drill_bicone_6301.html">Top Drill Bicone</a></li>
    <li><a href="[-- OUTPUT_DIRECTORY_URL --]/swarovski_crystal_round_pearls_5810.html">Round Pearls</a></li>
    <li><a href="[-- OUTPUT_DIRECTORY_URL --]/RingBead.html">Ring Beads</a></li>
    <li><a href="[-- OUTPUT_DIRECTORY_URL --]/column_pendant.html">Column Pendant</a></li>   
    <li><a href="[-- OUTPUT_DIRECTORY_URL --]/swarovski_crystal_bicones_5301_xilion_5328.html">Bicones &amp; Xilion</a></li>
    <li><a href="[-- OUTPUT_DIRECTORY_URL --]/swarovski_butterfly_beads_5754.html">Butterfly Beads</a></li>
    <li><a href="[-- OUTPUT_DIRECTORY_URL --]/swarovski_crystal_cosmic_rings_4139.html">Cosmic Rings</a></li>
    <li><a href="[-- OUTPUT_DIRECTORY_URL --]/swarovski_crystal_polygon_drops_6015.html">Polygon Drops</a></li>
    </ol>
 </div>
 </div>   
  <div class="row fullback">
  [-- INCLUDE Page-Layout PROCESS --]
 [-- IF PAGE.NumLinks 0 --]
 [-- ELSE --]
 <div class="odd_links">
  [-- LOOP LINKS PAGE.Columns --]
   [-- LINK --]
 [-- END_LOOP LINKS --]
 </div>
 [-- END_IF --]
 
 [-- IF PAGE.Text2 --]
  <p>[-- PAGE.Text2 --]</p>
 [-- END_IF --]
 
 [-- IF PAGE.NumProducts "0" --]
[-- ELSE --]
<div class="itemListing [-- IF PRODUCT.field2 --][-- PRODUCT.field2 --][-- END_IF --]"><div id="setup">

[-- VAR.ProductCounter "0" --]
[-- LOOP PRODUCTS --]
<article itemscope itemtype="http://schema.org/IndividualProduct" itemid="#product"><div class="blocks col-md-3 col-sm-6 col-xs-6" >
        <div class="pods thumbnail">[-- PRODUCT --]</div></div></article>[-- VAR.ProductCounter INC --]
[-- END_LOOP PRODUCTS --]
</div>
[-- END_IF --]
 
 [-- IF PAGE.ProductsPerPage "0" --]
 [-- ELSE --]
  <div class="pagination pagebtm">[-- PREVNEXT --]</div>
 [-- END_IF --]
 
 [-- IF PAGE.Text3 --]
  <p>[-- PAGE.Text3 --]</p>
 [-- END_IF --]
 </div>
 </div>
 <div class="totop"><a href="#top"></a></div>
<!--[if IE 7]>
<div class="iealert">We see you are using a lightly supported browser. For a more complete experience consider upgrading to <a href="https://www.google.com/chrome/" target="_blank">Chrome</a>, <a href="http://www.apple.com/safari/" target="_blank">Safari</a>, <a href="http://www.mozilla.org/en-US/firefox/new/" target="_blank">Firefox</a> or <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home" target="_blank">Internet Explorer 11</a>.</div>
<![endif]-->
    </div>
<div class="row">   
[-- INCLUDE Bootstrap-menu-footer PROCESS --]
    </div>
</div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="[-- OUTPUT_DIRECTORY_URL --]/media/masonry.pkgd.min.js"></script>
<script src="[-- OUTPUT_DIRECTORY_URL --]/media/imagesloaded.pkgd.min.js"></script>   
<script>
    jQuery.fn.removeInlineCss = function(property){

        if(property == null)
            return this.removeAttr('style');

        var proporties = property.split(/\s+/);

        return this.each(function(){
            var remover =
                this.style.removeProperty   // modern browser
                || this.style.removeAttribute   // old browser (ie 6-8)
                || jQuery.noop;  //eventual

            for(var i = 0 ; i < proporties.length ; i++)
                remover.call(this.style,proporties[i]);

        });
    };
 
    $(document).ready(function () {
      $('[data-toggle=offcanvas]').click(function () {
        $('.row-offcanvas').toggleClass('active')
      });
    });
   $("#numz div").removeInlineCss();

    $(".open-panel").click(function(){
    $("html").addClass("openNav");
        });
    $(".close-panel, #content").click(function(){
    $("html").removeClass("openNav");
        });
    var elem = document.getElementById( 'numz' );
    elem.innerHTML = elem.innerHTML.replace( /\b(\d+)\b/g, '<span class="itemsin">$1</span>' );
    $('.itemsin').each(function() {
        $(this).next('a').add(this.nextSibling).wrapAll('<div class="hidden"></div>');
});
    // Masonry
    $(document).ready(function () {
        var $container = $('#setup');

        $container.imagesLoaded(function () {
            $container.masonry({
                itemSelector: '.blocks',
                columnWidth: '.blocks',
                transitionDuration: 0
            });
        });
    });
    // Show Search Box
    $("#toggle").click(function() {
      $(this).toggleClass("on");
      $("#showSearch").slideToggle();
    });
    </script>
</body>
</html>
[-- END_DEFINE PAGE --]

Re: Custom Content Filter

PostPosted: Thu Jan 29, 2015 11:40 am
by Jim
Product.<anything> template tags can only be used in the product template. The code you show is for a page template so no product tags will work..

Re: Custom Content Filter

PostPosted: Thu Jan 29, 2015 11:56 am
by Kapitol
Okay, thanks. If I want to be able to do what I want I'll just have to figure out a way to move the looped code in the page template into the product template.

Re: Custom Content Filter

PostPosted: Thu Jan 29, 2015 12:10 pm
by Kapitol
That did the trick. Thank again.
All times are UTC - 7 hours
Page 1 of 1
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/