Announcement

Collapse
No announcement yet.

Extended Info PopUp Link from Sub Section Page

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

    Extended Info PopUp Link from Sub Section Page

    I have a top level section, then within that I have sub-sections with one product in each sub-section.

    On the section page (which shows thumbnails of all the sub-sections inside that section) I want to have an 'enlarge image' link so that customers can view an enlarged image of a particular product before they decide to click through to the product page.

    I figured this would need an extended info popup and set about trying to create one by following the instruction in the AUG.

    I understand the principles behind it but can't quite seem to get it to work. The image I need to display is actually the main product image of the product in the sub-section below.

    For example I have:

    Top Level Section (Page A)
    >> Sub-section
    >>>Product Z

    What I need is a link on Page A that opens a popup and shows the main image specified for Product Z in Product Details.

    Hopefully I've explained that well enough for someone to get the gist of what I'm trying to do and offer a solution

    Thanks.
    Actinic Web Design | Actinic Templates

    #2
    Hi Rob

    I suggest you checkout the solution on the Advanced User Guide on p15 'Creating a Listing Page which Links Through to Full Details Pages'. This uses the same product details to create a 'thumbnai' product and a main full product on a separate page. The separate page is just an extended information page, opened in the same window, and with an add to cart button. You can therefore have the short 'thumbnail' product with a pop-up window that shows the extended information image, and then have the main 'extended information' page opening in the same window (you'll also need the trick on p24 'Creating Additional Pop-Up Windows')

    Comment


      #3
      Hi Chris,

      Many thanks although I'm not sure that will work in this case. I am already using the Extended Info page in same window option when you get through to the product page - the product has a Try before buying option.

      The section I'm working on can be found at:

      http://www.glasses4less.matrix23.co....r_Glasses.html

      just in case you can suggest an alternative way of doing this.

      I've added an 'enlarge image' button to illustrate what I want to do. I've seen a site that was built with v7 do something similar although they may have structured the sections slightly differently.

      Thanks

      Rob
      Actinic Web Design | Actinic Templates

      Comment


        #4
        Hi Rob - awesome site!

        I would suggest creating the additional pop-up pages (from the Advanced User Guide) but make everything settable at the section level. There's no reason why extended information pages have to only be for products. You could create all the necessary extra variables (for the page itself, and for the extra section image) and have everything settable at the section level.

        Comment


          #5
          Hi Chris, Thanks but I'm a bit confused

          I tried to create an additional popup using the existing layout and it works fine from the product page but not the section page. The problem seemed to be finding a variable that would insert a large product image from the sub-section below.

          Perhaps if I list the structure I've got you could mark against each part what you are suggesting?

          Currently:

          Section Page (needs enlarge image button to open up the product image in a popup)
          >Sub-section for each product
          >>Product (includes link to an extended info page that opens in same window so people can trial the frame at home before buying)

          Thanks

          Rob
          Actinic Web Design | Actinic Templates

          Comment


            #6
            There is no way to automatically display the product image from the 'Sub-section for each product' link I'm afraid.

            You will need to create a completely separate pop-up page mechanism for your section links - which show a larger image.

            First of all, go to 'Design | Library | Variables' and create a new variable called 'LargeProductImage' with the following settings...

            Name - LargeProductImage
            Description - Filename of the large product image
            Prompt - Filename of larger product image
            Place of Setting - Section
            Tab - Properties
            Allow '<Use Parent>' - [unticked]
            Type - Filename
            Allow Empty Value - Ticked
            Inital value - [blank]
            Top level value [blank]

            Then do the following to create the new pop-up window that will appear as part of your section link layouts:

            To begin with, you are going to create the layout and layout selector for the extra pop-up page.

            1. Right-click on any of the layout type groups in the 'Layouts' tab and select 'New Layout Type'.

            2. Give it a name of 'Section Popup Layout' and ensure you select 'Pop-up'.

            3. Click 'OK'.

            4. Right-click on this new layout type group and select 'New Layout'.

            5. Give it a name of 'Section PopUp Page' and click 'OK'.

            6. Now double-click on this layout to edit it.

            7. Click the 'Edit Layout Details' button.

            8. Change the value in the 'Extended Info Page Filename Field' from:
            <Actinic:Variable Name="ExtendedInfoPageName"/>
            to:
            popup_<actinic:variable name="SectionID"/>.html

            9. Click 'OK'.

            This will automatically use a filename for the popup pages of 'popup_' followed by the ID of the section.

            Now you need to put some layout code into this layout. The best way to do this is to go into one of the layouts in the existing 'Extended Info Layout' group and copy and paste the content from there into the new 'Extra Information Page' layout. You can amend this as necessary to remove all the product specific-fields and insert your new LargeProductImage variable within an <img> tag.

            You now need to create a layout selector to include the new 'Section PopUp Page' into the store design.

            1. Right-click on the 'Section Popup Layout' group and select 'New Selector'.

            2. Give it a name of 'SectionPopUpPage'.

            3. Give it a prompt of 'Layout for Section PopUp Page'.

            4. Under 'Place of Setting', select 'Site' and 'Section and set the 'Tab Name' to 'Properties'.

            5. Change to the 'Values' tab.

            6. Highlight 'Section PopUp Page' in the left list and click the '>' button to move it to the right list.

            7. Change back to the 'Basic Definition' tab.

            8. Click 'OK'.

            You are now ready to create a link to your extra information page.

            1. Close the library and look at the 'Design' tab.

            2. Select a section link layout that you want to include this link for for.

            3. Copy and paste the following code somewhere in the section link layout:

            <actinic:block if="%3cactinic%3avariable%20name%3d%22LargeProductImage%22%20%2f%3e%20%21%3d%20%22%22">
            <actinic:variable name="SectionPopUpPage" />

            <br />
            <a href="javascript:ShowPopUp('popup_<actinic:variable name="SectionID"/>.html',400,400);">Click here to launch extra information page</a>

            The 400 values are for the width and height of the window – so feel free to amend these values accordingly.

            Comment


              #7
              Hi Chris,

              Hundreds and thousands of thank yous. Thank you. Thank You.

              Did I say thank you?

              Thank You!
              Actinic Web Design | Actinic Templates

              Comment

              Working...
              X