Announcement

Collapse
No announcement yet.

Parent section image for products in search results

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Parent section image for products in search results

    Client site has products grouped by parent section and the parent section for each group of products displays the image for the section.

    Click image for larger version

Name:	colours.jpg
Views:	73
Size:	107.4 KB
ID:	553992

    https://www.graphicz.solutions/stcv1...30_2886%2Ehtml (Login user: graphicz - pass: testtest)

    Is there a way for products in search results to display the parent section image? I realise this may involve script changes but I do not know what to do in this respect.

    Thank you!
    Jonathan Chappell
    Website Designer
    SellerDeck Website Designer
    Actinic to SellerDeck upgrades
    Graphicz Limited - www.graphicz.co.uk

    #2
    Try this:
    In layout Standard Search Result, place where you want the image to display:
    Code:
    <span class="srsectionimage" data-sid="<actinic:variable name="SearchResultSectionID" />" data-title="<actinic:variable name="SearchResultProductName" />"></span>
    And in layout Search Results Page Bulk Area RWD at the very bottom append:
    Code:
    <script type="text/javascript">
    var sectimages = {
    <actinic:block type="entiresectionlist">
    	<actinic:block if="%3cactinic%3avariable%20name%3d%22SectionImageFileNameRaw%22%20%2f%3e%20%21%3d%20%3cactinic%3avariable%20name%3d%22DefaultSectionImage%22%20%2f%3e"><actinic:variable name="SectionID" selectable="false" />:'<actinic:variable name="SectionImageFileNameRaw" encoding="perl" selectable="false" />',</actinic:block>
    </actinic:block>
    	};
    $( ".srsectionimage" ).not( "[data-sid='']" ).each(function(){
    	var simage = sectimages[$(this).attr('data-sid')];
    	if ( simage && ($(this).closest( "div.std-product-details" ).has( "img" ).length == 0) )
    		{
    		var link = $(this).closest( "div.std-product-details" ).find( "a:first" ).prop('href');
    		$(this).html('<a href="' + link + '"><img class="srsectimage" src="' + simage + '" title="' + $(this).attr('data-title') + '" /></a>');
    		}
    });
    </script>
    This works by building a list of all Sections that have images and adding it to the Search Results page. After the results are displayed that list is looked up and used to replace the results image marker with the Section image (but only if there's no image shown for that product).

    NOTE THAT THIS IS FOR NON-SWIFT SITES
    Norman - www.drillpine.biz
    Edinburgh, U K / Bitez, Turkey

    Comment


      #3
      Genius. Thank you so much Norman.
      Jonathan Chappell
      Website Designer
      SellerDeck Website Designer
      Actinic to SellerDeck upgrades
      Graphicz Limited - www.graphicz.co.uk

      Comment


        #4
        Hi, Jonathan

        I was tinkering with the above so double-check that you're using the latest version.
        Norman - www.drillpine.biz
        Edinburgh, U K / Bitez, Turkey

        Comment


          #5
          Thank you!
          Jonathan Chappell
          Website Designer
          SellerDeck Website Designer
          Actinic to SellerDeck upgrades
          Graphicz Limited - www.graphicz.co.uk

          Comment


            #6
            Another little edit to post #2 to add a title to the image and make it clickable.
            Norman - www.drillpine.biz
            Edinburgh, U K / Bitez, Turkey

            Comment


              #7
              Just to be clear, in Swift, the placeholder code goes within the <script> tags of 'Standard Search Result'

              And the larger code goes at the bottom of 'Filtered search results page bulk area Swift'

              Thank you.

              Jonathan Chappell
              Website Designer
              SellerDeck Website Designer
              Actinic to SellerDeck upgrades
              Graphicz Limited - www.graphicz.co.uk

              Comment


                #8
                The array of images is produced but I am not geting the image in the search result:

                https://www.graphicz.solutions/stcv18single/

                Login graphicz testtest

                Search for vase, or rustic.

                It also takes a little time as it is very large site, could it be 'invariant' on an outer page layout perhaps?

                Thank you
                Jonathan Chappell
                Website Designer
                SellerDeck Website Designer
                Actinic to SellerDeck upgrades
                Graphicz Limited - www.graphicz.co.uk

                Comment


                  #9
                  Product image has to be selected in Search and Filering settings - results.

                  In Swift, however, if the priduct image is empty the site shows 'invisible_image.jpg'

                  Could

                  Code:
                  has( "img" ).length == 0) )
                  be written as somthing like

                  Code:
                  has( "img" ).name == 'invisible_image.jpg') )
                  I am trying by removing the content of the src/data-src tags:

                  Code:
                  <script type="text/template"><div class="sb-product-image w-100 text-center"><Actinic:Variable Name="SearchResultLink"/><img class="lazyload sb-thumbnail img-responsive" src="" data-src="" title="<actinic:variable name="SearchResultProductName" />" border="0"/></a></div></script>
                  Jonathan Chappell
                  Website Designer
                  SellerDeck Website Designer
                  Actinic to SellerDeck upgrades
                  Graphicz Limited - www.graphicz.co.uk

                  Comment


                    #10
                    Another choice is to untick Product image in Search and Filering settings - results and add this to the search result layout.

                    Code:
                    <actinic:block if="%21%3cactinic%3avariable%20name%3d%22SearchResultShowsImage%22%20%2f%3e" >
                    <img src="" alt="" />
                    </actinic:block>
                    It displays <img src="" alt="" /> but the script above is not triggered - .has( "img" ).length == 0
                    Jonathan Chappell
                    Website Designer
                    SellerDeck Website Designer
                    Actinic to SellerDeck upgrades
                    Graphicz Limited - www.graphicz.co.uk

                    Comment


                      #11
                      Swift does things completely differently. It uses pagination and filtering on the search results.
                      Remove any code from above and start with a clean slate.
                      Then add this to the bottom of Standard JavaScript Header Functions:
                      Code:
                      <actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Search%20Results%22">
                      	<actinic:block php="true">
                      		$sr = fopen('sectionimages.js', 'w');
                      		fwrite($sr, 'var sectimages = {');
                      		<actinic:block type="entiresectionlist"><actinic:block if="%3cactinic%3avariable%20name%3d%22SectionImageFileNameRaw%22%20%2f%3e%20%21%3d%20%3cactinic%3avariable%20name%3d%22DefaultSectionImage%22%20%2f%3e">fwrite($sr, "<actinic:variable name="SectionID" selectable="false" />:'<actinic:variable name="SectionImageFileNameRaw" encoding="perl" selectable="false" />',");</actinic:block></actinic:block>
                      		fwrite($sr, "};");
                      		fclose($sr);
                      	</actinic:block>
                      </actinic:block>
                      <script type="text/javascript" src="sectionimages.js"></script>
                      This creates a helper file containing a list of Section images against the Section Id.

                      Edit actinicsearch.js and look for the line:
                      Code:
                      			objProductDetails.m_sImage = pg_sDefaultProductImage;	// hope it has the real image
                      Replace it with:
                      Code:
                      			objProductDetails.m_sImage = sectimages[sSectionID] ? sectimages[sSectionID] : pg_sDefaultProductImage;	// hope it has the real image
                      That's it. Update the site twice to initialise the helper file writer.

                      You'll need to re-edit actinicsearch.js if you update SellerDeck to a new version.
                      Norman - www.drillpine.biz
                      Edinburgh, U K / Bitez, Turkey

                      Comment


                        #12
                        Thank you so much again Norman
                        Jonathan Chappell
                        Website Designer
                        SellerDeck Website Designer
                        Actinic to SellerDeck upgrades
                        Graphicz Limited - www.graphicz.co.uk

                        Comment


                          #13
                          Uploaded and tested and brilliantly perfect. Thank you again Norman.
                          Jonathan Chappell
                          Website Designer
                          SellerDeck Website Designer
                          Actinic to SellerDeck upgrades
                          Graphicz Limited - www.graphicz.co.uk

                          Comment

                          Working...
                          X