"Return to Gallery" Button action in shopping cart

Mediahype · 2017-01-29 13:48:31

Hi again,

If I remove an item from the shopping cart the screen message says Your Cart is empty and there is a button "Back to the gallery"

How can one change the action of the "Back to the gallery" button based on where you came from?

Explanation:
If I do this from a picture gallery the "Back to gallery" button works OK and returns me back to the gallery where I originated from which is correct.

If I remove a product added from a product page the "Back to gallery" doesn't return me to the product page but rather a page that is called from within the product page.

How can I change which page the Back to Gallery returns to when removing items from the shopping cart that were added from a product page and not a image gallery? I cannot see where in the templates or Backlight/Publisher settings.

Regards

rod barbee · 2017-01-29 14:53:16

The behavior of that button isn't user configurable from Backlight

It works as expected on my test site though. In both picture galleries and product pages, I'm returned to the originating gallery or product page.

I know your site isn't online yet, but there may not be much help Ben or Matt can offer without a page to test.

Mediahype · 2017-01-29 16:01:22

Thanks Rod,

It jumps back to a fullscreen gallery page that I created which is viwed from an iframe inside the product page

As I couldn't insert a slideshow where I wanted to in a product page, I created a fullscreen page with a slideshow and then used iframe to display the slideshow on the fullscreen page in the product page.

The button returns me to the fullscreen slideshow page.

As this fullscreen page is not actually meant to be viewed on my website and is really just a hack so I can display a slideshow where I want, is there a way to move it or rename it so it doesn't act as a backlight page but so that I can still call to it through a url?

Maybe then when the button would return to the product page instead of the fullscreen page.

Cheers

rod barbee · 2017-01-29 23:02:00

I've got no clue, sorry. This is probably something for the developers to answer.
As I said, Matt is probably going to need something to look at.
Any chance you can set up a development site in a subdomain?

Mediahype · 2017-01-30 21:23:13

Thanks again Rod!

I've applied for a hosting site, so hopefully will have it up and runing in the next few days. When it's up what's the best way to get login details to you, via your contact page or pm?

Cheers

Ben · 2017-01-30 21:33:59

Mediahype wrote:

It jumps back to a fullscreen gallery page that I created which is viwed from an iframe inside the product page

We do not support iframes and strongly advise against them.

The 'Return to Gallery' takes the browser back to the last gallery in which an interaction with the cart was made. If that gallery was within an iframe then it should take you to the gallery in a full window. Is that what you're experiencing?

The solution is to not use iframes. We should be able to advise you on how to achieve the desired result once we can see what you're trying to do.

rod barbee · 2017-01-30 22:03:14

Mediahype wrote:

Thanks again Rod!
I've applied for a hosting site, so hopefully will have it up and runing in the next few days. When it's up what's the best way to get login details to you, via your contact page or pm?
Cheers

The best thing is to post links to problem pages.
There are email links under the name/picture of the poster in each post in case login credentials are requested.

Mediahype · 2017-01-30 22:15:10

Sounds spot on Ben.

I'll send in the login details as soon as it's posted up.

Thanks again Ben and Rod!

Mediahype · 2017-02-01 20:07:12

Hi Ben,

My site is posted sort of and I've sent you an email with login details. The main site domain name hasn't been transferred yet so it's running on a test site which will stop working when they migrate the domain name accross.

Cheers
Ian

Ben · 2017-02-01 20:55:40

Hi Ian, thanks for the links. I can see the issue with iFrames and can't think of a way to work around this with the cart code or configuration. Moving away from iFrames would be a good approach, not just to solve this issue but to improve the navigation of your site.

Can you share the details in this thread once your site is live? Other forum users should able to give tips on how to break out of the frames.

Mediahype · 2017-02-02 19:18:39

Thanks Ben,

Website URL is:
http://www.overthetopimagery.com.au

To recap the issue is;

Having to use iframe inside the tabbed content to publish a slideshow where I wish it to be.

The tabbed content code has issues in that it doesn't recognise the length of the content correctly so the scroll is longer than it should be.

The iframe is also an issue. If anyone has any ideas on how to fix the tabbed content and run a slideshow within it I'd welcome any suggestions.

I am wondering if the Pym.js option might be a solution for the iframe.

Regards

rod barbee · 2017-02-02 22:15:22

The tabbed content page also has issues on mobile devices that seem to get worse as the device gets smaller.

Mediahype · 2017-02-02 22:42:43

It does indeed Rod. Think I'm gonna have to put on the creative hat and try figure out an alternative way of displaying the info.

Cheers

Matthew · 2017-02-03 15:07:59

The way that you're using iframes is not the best or intended use of iframes. Further, our galleries are not designed to be used in an iframe, and being displayed in an iframe can actively interfere with the gallery's functionality.

On what page are you trying to put a gallery into a tab, and why?

Matthew · 2017-02-03 17:14:31

Btw, I haven't really documented it, but Backlight has CSS tabs built in. You can see them in use on our Backlight product page. The basic format is this:

<div class="radioTabs">

  <input type="radio" name="tabs" id="tab1" checked>
  <label for="tab1">Tab 01</label>

  <input type="radio" name="tabs" id="tab2">
  <label for="tab2">Tab 02</label>

  <section id="content1">
    <p><strong>Tab 01</strong></p>
  </section>
    
  <section id="content2">
    <p><strong>Tab 02</strong></p>
  </section>
  
</div>

You can add as many tabs as you like, though you'll want to be mindful of how things crunch up on small displays. Just makes sure that the "id" and "for" attributes match up for the input, label and section.

The built-in CSS supports up to four tabs. If you need more than that, then you'll need to extend it via custom CSS, i.e.:

#tab5:checked ~ #content5,
#tab6:checked ~ #content6 {
	display: block;
}

Mediahype · 2017-02-03 23:18:56

Hi Matthew,

Great to hear from you! Awesome stuff your tab code is working. (I haven't uploaded it to my main site yet but it's working on my local instance)

I can't get content 5 displaying though with the CSS code. The tab is there just not the content. I added an input type and sectionid for content 5 and have tried moding the css code but still can't get content 5 to display.

I removed the #hash and replaced with a . but neither worked.

.tab5:checked ~ .content5,
#tab6:checked ~ #content6 {
display: block;
}
I must confess CSS is all new to me so still having trouble understanding it.

In response to your query I am trying to put a gallery into the pictures tab on a product page. My logic is I'm trying to group the product content together and I thought that tabs would be a great way to do that. Intially I thought of creating a seperate page for each tab but that didn't seem to be a very efficient way of doing things.

On my website under Custom RPAS there are currently two product buttons in tray 1, Sokar and Reconn. Here is the link to Sokar

http://www.overthetopimagery.com.au/Sokar

These pages have the tabbed content and I wanted to have a slideshow for each product in the tabbed content. If there is a better way of doing this I'm all ears. I'm currently wondering if pym.js would resolve the iframe issue I have in that it doesn't scale nicely in the page especially when used on smaller screens.

This still wouldnt resolve the returning to the previous gallery (in this case the fullscreen iframe page) so was wondering if I could insert some code into the fullscreen iframe page that would return the user to the tabbed content.

Worry is this would be a messy hack and not an efficient way of doing things.

Cheers

Ben · 2017-02-04 06:53:04

Thinking aloud, as I haven't seen the Backlight tabs in action. If these were to use #hash links, e.g. http://yoursite.com/page.html#tab2, and if the page shows the correct tab when loaded via a URL such as that, then a redirect URL of the same format could work via the cart.
Matt, do the Backlight tabs work in that way?

Mediahype · 2017-02-04 12:49:55

Hi Ben,

It's getting there! I have added some styling around the tabs and the 5th tab is now there. Having some difficulty with the slideshow via pym.js though. If I try it on my QNAP at home the pym.js slideshow appears but on the hosted website all I get displayed is the website header. (The full screen page that the content is coming from does not have a header as I disabled it in the template.

Not sure what I'm doing wrong, I've checked the links to the pym.v1.min.js and the webpage and they appear ok. The height of the pym.js is also incorrect on my home QNAP and it only shows about 1/3 of the slideshow height.

http://www.overthetopimagery.com.au/Sokar

Matthew · 2017-02-06 13:10:35

The built-in tabs are entirely CSS-based, so there's no support for URL hash.

I don't think Pym is the answer for what you're trying to do. As for what you're trying to do, it's still an approach I'd rather see you move away from.

One approach that might be worth trying -- and I haven't tested this, so consider this a bit of improve -- would be using PHPlugins. Specially, using the ttg_gallery_top and ttg_gallery_bottom locations. Try opening the tabs in ttg_gallery_top, including everything that comes before the gallery. Then close the tabs in ttg_gallery_bottom, including all tabs, etc. that follow the gallery (i.e. the Purchase tab) ... such that the "Pictures" tab contains the gallery itself.

Mediahype · 2017-02-06 17:42:46

Hi Matthew,

Yes pym is not working too well. Well it is on my QNAP but not well as the height is correct. Nothing is displayed at all on the hosted site despite the pictures showing that they are slideshowing in Firefox Inspector.

Love the suggestion of using PHPlugins but I'm not sure how to go about doing that.

If I add the following code to the php file, "This is a test" shows on every page on the website. How do I ensure it only runs on the page I want it to? Also if I add all of the content in the tabs to the php file I would imagine that file would get rather large and cumbersome to manage'. I would have thought it best to keep web content out of the php file.

function ttg_gallery_top( $style, $path ) {
echo '<p style="color:red;">This is a test.</p>
';
return true;
} // END

And then once it's only running on 1 page how do I only display the slidshow within 1 of the tabs? Would love to try it as this is keeping me from promoting my site.

Cheers
Ian

Matthew · 2017-02-06 18:34:31

To have it only on the one page, you will need to duplicate your page template, setup that duplicate to use PHPlugins, then use it only for the desired page.

There's no harm putting the tab content into the phplugins file; regardless whether the content it added through Backlight or via PHPlugins, it's all being processed as PHP at some point in the rendering pipeline.

And you would just need to wrap the gallery in the tab, in theory. So all of the tabs before the gallery, and the gallery's own tab would open in ttg_gallery_top. You would then close the gallery's tab in ttg_gallery_bottom, and continue on with any tabs to come after. Something like:

function ttg_gallery_top( $style, $path ) { 
    echo '

<div class="radioTabs">

  <input type="radio" name="tabs" id="tab1" checked>
  <label for="tab1">Tab 01</label>

  <input type="radio" name="tabs" id="tab2">
  <label for="tab2">Tab 02</label>

  <input type="radio" name="tabs" id="tab3">
  <label for="tab3">Tab 03</label>

  <input type="radio" name="tabs" id="tab4">
  <label for="tab4">Tab 04</label>

  <section id="content1">
    <p><strong>Tab 01</strong></p>
  </section>
    
  <section id="content2">
    <p><strong>Tab 02</strong></p>
  </section>

  <section id="content3">
		<!-- opening the gallery tab -->

    ';
    return true;
} // END


function ttg_gallery_bottom( $style, $path ) { 
    echo '

		<!-- closing the gallery tab -->
  </section>
    
  <section id="content4">
    <p><strong>Tab 04</strong></p>
  </section>

</div>
    ';
    return true;
} // END

Like I said, I'm improving and haven't tested this. But it might work. It's worth trying, in any case.

Mediahype · 2017-02-06 19:41:33

Hi Matthew, that's sort of working, awesome stuff

It's not picking up the height of the images in the slideshow though;

https://www.overthetopimagery.com.au/Sokar2

Select the Pictures tab

Looking at Inspector in Netscape it's picking up a style height of 75px from somewhere but not sure where;

So close thank you Matthew, I really appreciate your help with this!!

Cheers
Ian

Last edited by Mediahype (2017-02-06 21:14:27)

Matthew · 2017-02-06 23:07:55

Okay, when the gallery is hidden (display:none), the script cannot read its width, and so is not able to calculate the gallery's aspect ratio.

If the gallery is visible and you resize the screen, the aspect ratio calculation will fire again, and all is well.

So the solution is to trigger the re-calc when we view the Pictures tab. We can accomplish this using some jQuery and the PHPlugins ttg_scripts hook. Or so I reckon. Try adding this to your phplugins file.

function ttg_scripts( $style, $path ) { 
	echo '
	<script>
		$('input:radio[id="tab5"]').change(function(){
			if(this.checked) {
				vegasAspectRatio();
			}
		});
	</script>
	';
} // END

Mediahype · 2017-02-07 16:35:46

Hi Matthew,

I changed "tab5"to "tab4" as tab 4 is the one with the slideshow but alas it's not working. I'm getting an error
"Something went wrong
Unexpected error: syntax error, unexpected '>' in sokar.php on line 25
Please report error at http://community.theturninggate.net"

Line 25 is <script> I have tried relocating the code withing the php file but it keeps returning the same error.

If I remove the <script> & </script> I then get an error on the $.

Cheers
Ian

Matthew · 2017-02-07 18:49:43

Shit. Sorry. Syntax. This:

function ttg_scripts( $style, $path ) { 
	echo '
	<script>
		$(\'input:radio[id="tab5"]\').change(function(){
			if(this.checked) {
				vegasAspectRatio();
			}
		});
	</script>
	';
} // END

Community @ The Turning Gate

#1 2017-01-29 13:48:31

"Return to Gallery" Button action in shopping cart

#2 2017-01-29 14:53:16

Re: "Return to Gallery" Button action in shopping cart

#3 2017-01-29 16:01:22

Re: "Return to Gallery" Button action in shopping cart

#4 2017-01-29 23:02:00

Re: "Return to Gallery" Button action in shopping cart

#5 2017-01-30 21:23:13

Re: "Return to Gallery" Button action in shopping cart

#6 2017-01-30 21:33:59

Re: "Return to Gallery" Button action in shopping cart

#7 2017-01-30 22:03:14

Re: "Return to Gallery" Button action in shopping cart

#8 2017-01-30 22:15:10

Re: "Return to Gallery" Button action in shopping cart

#9 2017-02-01 20:07:12

Re: "Return to Gallery" Button action in shopping cart

#10 2017-02-01 20:55:40

Re: "Return to Gallery" Button action in shopping cart

#11 2017-02-02 19:18:39

Re: "Return to Gallery" Button action in shopping cart

#12 2017-02-02 22:15:22

Re: "Return to Gallery" Button action in shopping cart

#13 2017-02-02 22:42:43

Re: "Return to Gallery" Button action in shopping cart

#14 2017-02-03 15:07:59

Re: "Return to Gallery" Button action in shopping cart

#15 2017-02-03 17:14:31

Re: "Return to Gallery" Button action in shopping cart

#16 2017-02-03 23:18:56

Re: "Return to Gallery" Button action in shopping cart

#17 2017-02-04 06:53:04

Re: "Return to Gallery" Button action in shopping cart

#18 2017-02-04 12:49:55

Re: "Return to Gallery" Button action in shopping cart

#19 2017-02-06 13:10:35

Re: "Return to Gallery" Button action in shopping cart

#20 2017-02-06 17:42:46

Re: "Return to Gallery" Button action in shopping cart

#21 2017-02-06 18:34:31

Re: "Return to Gallery" Button action in shopping cart

#22 2017-02-06 19:41:33

Re: "Return to Gallery" Button action in shopping cart

#23 2017-02-06 23:07:55

Re: "Return to Gallery" Button action in shopping cart

#24 2017-02-07 16:35:46

Re: "Return to Gallery" Button action in shopping cart

#25 2017-02-07 18:49:43

Re: "Return to Gallery" Button action in shopping cart

Board footer