Announcement

Collapse
No announcement yet.

Rather nice pop-up off the component

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

  • Rather nice pop-up off the component

    Hi programming bods

    I rather like this:
    https://www.biggamehunters.co.uk/aca...Enclosure.html

    .. on the component they have a nice little + symbol that generates a pop-up of the actual product that the component links to. Nice.

    Just trying to figure out how this might be achieved.

    Any ideas ?


  • #2
    That is quite nice isn't it. It lets them list optional extras to go with the product that can be added just by ticking the box. No idea how it's being done though.
    -----------------------------------------

    First Tackle - Fly Fishing and Game Angling

    -----------------------------------------

    Comment


    • #3
      They are using jQuery's .load function to load the product page into a Lightbox-like popup.

      Rather than loading the full HTML page, they use the capability of .load to load only a portion of the page designated by a jQuery selector (in this case a DIV with class="product-information").

      I use the same technique to load the entire product form from a products Product Page as a replacement for the SellerDeck Search Results, thus allowing products to be purchased straight from the search results page.
      Norman - www.drillpine.biz
      Edinburgh, U K / Bitez, Turkey

      Comment


      • #4
        Nice. We could just do with a step by step guide on how to do this. lol.

        Comment


        • #5
          The answer lies here: http://api.jquery.com/load/
          Last edited by graphicz; 19-Aug-2018, 09:17 AM. Reason: Changed link
          Jonathan Chappell
          Website Designer
          SellerDeck Website Designer
          Actinic to SellerDeck upgrades
          Graphicz Limited - www.graphicz.co.uk

          Comment


          • #6
            Examples at https://www.graphicz.solutions/jquery-load-div/

            Basic code

            Code:
            <ol id="new-projects"></ol>
            
            <script>
            $( "#new-projects" ).load( "load.html #projects li" );
            </script>
            load.html code

            Code:
            <div id="projects">
            <li>jQuery</li>
            <li>jQuery UI</li>
            <li>jQuery Mobile</li>
            <li>QUnit</li>
            <li>Sizzle</li>
            </div>
            Code with a div:

            Code:
            <b>Projects:</b>
            <div id="marsupials"></div>
            
            <script>
            $( "#marsupials" ).load( "load2.html .descriptionstuff" );
            </script>
            load2.html

            Code:
            <div class="descriptionstuff">
            <h2>Wombat</h2>
            <img src="wombat.jpg" alt="Wombat" width="400" height="413" />
            <p><strong>Wombats</strong>&nbsp;are short-legged, muscular&nbsp;quadrupedal&nbsp;marsupials&nbsp;that are native to&nbsp;Australia. They are about 1&nbsp;m (40&nbsp;in) in length with small, stubby tails. There are three extant species and they are all members of the&nbsp;familyVombatidae. They are adaptable and habitat tolerant, and are found in forested, mountainous, and&nbsp;heathland&nbsp;areas of south-eastern Australia, including Tasmania, as well as an isolated patch of about 300&nbsp;ha (740 acres) in&nbsp;Epping Forest National Park[2]&nbsp;in central Queensland.</p>
            <p><span id="Evolution_and_taxonomy"><strong>Evolution and taxonomy</strong></span></p>
            <p>Though genetic studies of the Vombatidae have been undertaken, evolution of the family is not well understood. Wombats are estimated to have diverged from other Australian marsupials relatively early, as long as 40 million years ago, while some estimates place divergence at around 25&nbsp;million years.&nbsp;While some theories place wombats as miniaturised relatives of diprotodonts, such as the rhinoceros-sized&nbsp;Diprotodon, more recent studies place the Vombatiformes as having a distinct parallel evolution, hence their current classification as a separate family.</p>
            </div>
            Code with a div and fancybox:

            Code:
            <p>View the project - <a class="fancybox" href="#marsupials" title="marsupials"><img src="magnifier.png" alt="magnifier" width="40" height="40"></a></p>
            
            <div id="marsupials" style="display: none;"></div>
            
            <script>
            $( "#marsupials" ).load( "load2.html .descriptionstuff" );
            </script>
            Download example files: https://www.graphicz.solutions/jquery-load-div.zip

            Or view source and save; Fancybox stuff from: http://fancyapps.com/fancybox/

            Taking this into SD shouldn't now be too hard.
            Jonathan Chappell
            Website Designer
            SellerDeck Website Designer
            Actinic to SellerDeck upgrades
            Graphicz Limited - www.graphicz.co.uk

            Comment


            • #7
              The answer with Sellerdeck seems to be to use a mixture of jquery .load and the comprehensive built in battery of AssociatedProduct variables.

              In the design library find the component layouts and copy the Standard Component Layout calling it Standard Component Layout Popup.

              Here is the content:

              Code:
              <actinic:block php="true">
              global $sCompCheckBox;    
              $sCompCheckBox = "";
              
              global $bHideOutOfStock;
              $bHideOutOfStock = (<actinic:variable name="StockMode" selectable="false" /> == 1 AND <actinic:variable name="IsPermutationHidden" selectable="false" />);
              </actinic:block>
              <actinic:block if="%3cactinic%3avariable%20name%3d%22IsComponentCheckboxShown%22%20%2f%3e">
                 <input type="checkbox" name="<Actinic:Variable Name="UIWidgetName"/>" class="ajs-comp <actinic:block if="%3cactinic%3avariable%20name%3d%22IsUsedAssociatedProduct%22%20%2f%3e" >rts_<actinic:variable name="AssociatedProduct::ProductID" />_</actinic:block>"
              <actinic:block if="%3cactinic%3avariable%20name%3d%22IsSelectedByDefault%22%20%2f%3e">checked="checked"</actinic:block> <actinic:block if="%3cactinic%3avariable%20name%3d%22IsPreviewMode%22%20%2f%3e%20%3d%3d%20true" >onclick="ChoiceChanged(this)"</actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22IsHostMode%22%20%2f%3e%20%3d%3d%20FALSE%20AND%20%3cactinic%3avariable%20name%3d%22IsPreviewMode%22%20%2f%3e%20%3d%3d%20FALSE" >onclick="ChoiceChanged(this, '<actinic:variable name="DynamicPriceCGIURL" />', <actinic:variable name="SectionID" />)"</actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22IsHostMode%22%20%2f%3e%20%3d%3d%20TRUE%20AND%20%3cactinic%3avariable%20name%3d%22IsPreviewMode%22%20%2f%3e%20%3d%3d%20FALSE" >onclick="ChoiceChanged(this, '<actinic:variable name="DynamicPriceCGIURL" />', <actinic:variable name="SectionID" />, <actinic:variable name="ShopID" />)"</actinic:block> /> <actinic:block php="true" if="1" >    $sCompCheckBox = "<actinic:variable name="UIWidgetName" />"; </actinic:block>
              </actinic:block>
              <actinic:block if="%3cactinic%3avariable%20name%3d%22IsComponentHiddenFieldIncluded%22%20%2f%3e">
                 <input type="hidden" name="<Actinic:Variable Name="UIWidgetName"/>" class="ajs-comp <actinic:block if="%3cactinic%3avariable%20name%3d%22IsUsedAssociatedProduct%22%20%2f%3e" >rts_<actinic:variable name="AssociatedProduct::ProductID" />_</actinic:block>" value="on" />
              </actinic:block>
              <label><Actinic:Variable Name="ComponentDisplayLabel"/> at <actinic:variable name="AssociatedProduct::ProductPriceRaw" /><a class="fancybox" href="#<actinic:variable name="AssociatedProduct::ProductID" />_pop" title="<actinic:variable name="AssociatedProduct::ProductName" />"><img style="float:right;margin-left:8px;" src="magnifier.png" alt="magnifier" width="28" height="28"></a></label><actinic:block if="%28%3cactinic%3avariable%20name%3d%22StockMode%22%20%2f%3e%20%3d%3d%201%20AND%20%3cactinic%3avariable%20name%3d%22AssociatedProduct%3a%3aProductID%22%20%2f%3e%20%21%3d%20%27%27%20AND%20%3cactinic%3avariable%20name%3d%22AssociatedProduct%3a%3aIsStockMonitored%22%20%2f%3e%20%3d%3d%20TRUE%20AND%20%3cactinic%3avariable%20name%3d%22AssociatedProduct%3a%3aStockLevel%22%20%2f%3e%20%3c%20%3cactinic%3avariable%20name%3d%22AssociatedProduct%3a%3aStockSuspendLevel%22%20%2f%3e%29" >
                  <actinic:variable name="OutOfStock" />
              </actinic:block>
              <actinic:block if="%3cactinic%3avariable%20name%3d%22ComponentRetailCustomerMessage%22%20%2f%3e%20%21%3d%20%22%22">
              <Actinic:PRICE_EXPLANATION PROD_REF="<actinic:variable Name="ProductID" />" COMPONENTID=<actinic:variable name="ComponentIndex" />><actinic:variable name="ComponentRetailCustomerMessage" /></Actinic:PRICE_EXPLANATION><br />
              </actinic:block>
              
              <actinic:block if="%28%3cactinic%3avariable%20name%3d%22NumberAttributesInPushButtonGrid%22%20%2f%3e%20%3d%3d%200%29%20OR%0d%28%3cactinic%3avariable%20name%3d%22ListIndex%22%20%2f%3e%20%3c%20%3cactinic%3avariable%20name%3d%22ComponentCount%22%20%2f%3e%29">
                  <actinic:block if="%3cactinic%3avariable%20name%3d%22PermutationCount%22%20%2f%3e%20%3e%200">
                      <actinic:variable name="ComponentAttributeList" />
                  </actinic:block>
                  <actinic:block if="%3cactinic%3avariable%20name%3d%22PermutationCount%22%20%2f%3e%20%3d%3d%200" >
                      <actinic:variable name="AttributeList" />
                  </actinic:block>
              </actinic:block>
              <actinic:block if="%28%3cactinic%3avariable%20name%3d%22NumberAttributesInPushButtonGrid%22%20%2f%3e%20%21%3d%200%29%20AND%0d%28%3cactinic%3avariable%20name%3d%22ListIndex%22%20%2f%3e%20%3d%3d%20%3cactinic%3avariable%20name%3d%22ComponentCount%22%20%2f%3e%29">
                  <actinic:variable name="AttributeList" />
              </actinic:block>
              <actinic:block if="%3cactinic%3avariable%20name%3d%22IsPriceGridShownForComponents%22%20%2f%3e" >
                  <actinic:variable name="PermutationLayout" value="Permutation Grid" />
              </actinic:block>
              <actinic:block if="%3cactinic%3avariable%20name%3d%22ListIndex%22%20%2f%3e%20%3d%3d%20%3cactinic%3avariable%20name%3d%22ListCount%22%20%2f%3e" >
                  <textarea id="idTa_<actinic:variable name="ProductID" />_Saved" cols="10" rows="10" style="display: none;"></textarea>
                  <actinic:block if="%3cactinic%3avariable%20name%3d%22ComponentCount%22%20%2f%3e%20%3e%200" >
                      <actinic:variable name="ProductJavascriptLayout" />
                  </actinic:block>
              </actinic:block>
              
              <div id="<actinic:variable name="AssociatedProduct::ProductID" />_pop" style="width:400px;display: none;text-align:center;">
              <h2><actinic:variable name="AssociatedProduct::ProductName" /></h2>
              <img src="<actinic:variable name="AssociatedProduct::ProductImageFileName" />" alt="<actinic:variable name="AssociatedProduct::ProductName" />" >
              <p><actinic:variable name="AssociatedProduct::ProductDescription" /></p>
              <div id="<actinic:variable name="AssociatedProduct::ProductID" />_Custom1"></div>
              <div id="<actinic:variable name="AssociatedProduct::ProductID" />_Custom2"></div>
              <p>Price: <actinic:variable name="AssociatedProduct::ProductPriceRaw" /></p>
              <p><a href="<actinic:variable name="AssociatedProduct::ProductPageName" />">Visit Page</a></p>
              </div>
              <script>
              $( "#<actinic:variable name="AssociatedProduct::ProductID" />_Custom1" ).load( "<actinic:variable name="AssociatedProduct::ProductPageName" /> .customcontent1" );
              $( "#<actinic:variable name="AssociatedProduct::ProductID" />_Custom2" ).load( "<actinic:variable name="AssociatedProduct::ProductPageName" /> .customcontent2" );
              </script>
              Some of the hidden div content is using existing variables but say the product has some custom variable stuff (tabs or whatever) that can be brought in using jquery .load.
              I have two lumps of custom content with classes customcontent1 and customcontent2 which can be seen at: https://www.graphicz.solutions/component/acatalog/Amethyst-Heart-Necklace-25.html

              Now in content tree make a new component for your product using the settings as shown and choose your new layout for the component layout:

              Click image for larger version  Name:	componentpopupimg.jpg Views:	1 Size:	210.8 KB ID:	550393

              You will need to add the fancybox scripts and styles to the site folder and reference them in the javascript header functions.

              And that is about it. See it work at: http://www.graphicz.solutions/compon...nd-Ring-3.html

              It seems to work and if ticked the additional products get added to the cart. Ticking them also increases the dymamic price in the product layout.

              If I have made any awful gaffs please do point them out - thank you.
              Jonathan Chappell
              Website Designer
              SellerDeck Website Designer
              Actinic to SellerDeck upgrades
              Graphicz Limited - www.graphicz.co.uk

              Comment

              Working...
              X