Custom class link on button

I Need Help
1

I have a site that was originally built in Rapidweaver a few years ago that I would like to rebuild now in Blocs. It has a cart system through Fastspring that enables a pop up cart when the add to cart button is clicked.

In the page header it includes code like the following:

<script
    id="fsc-api"
    src="https://d1f8f9xcsvx3ha.cloudfront.net/sbl/0.8.2/fastspring-builder.min.js"
    type="text/javascript"
    data-storefront="example.onfastspring.com/popup-example">
</script>

On the button in Rapidweaver it has link applied as a custom class:

<a role="button" href="#" data-fsc-item-path-value="example" data-fsc-action="Add,Checkout" class=" button b-p hov-target    custom not-vault round custom-shape    use-icon>

The point I am struggling with is how to apply that link to the cart button in Blocs, so the pop up appears in the same way as with Rapidweaver. I tried adding it as a custom attribute but something isn’t right.

3

This is pretty frustrating and it’s not even clear what kind interaction type should be chosen on the button. In RW I was simply able to apply that line of code as a custom class applied to the button, as shown in the attachment below and it worked.

37

In Blocs I have tried setting the interaction option for the button as url, submit and none. I’ve played with the code as a custom attribute with no luck.

22

Any idea? @Norm

4

You would set each attribute like this

name: data-fsc-item-path-value
Value: example

name: data-fsc-action
value: Add,Checkout

23%20AM

the result

31%20AM
Screen Shot 2020-02-14 at 12.27.31 AM.png1224Ă—116 9.86 KB

5

It doesn’t want to know here and keeps rejecting it. When I open the custom attribute again it has reversed to the way it was before, as though it won’t accept the code.

6

So you add them like this and they disappear. ??

15%20AM

7

Pretty much yes. I’ll try restarting just to see if this is some kind of cache issue.

1 Like
8

So if I add the script, and click the button I get a spinning wheel briefly and then page errors from the FastSpring API, I am assuming that the correct result?

9

To actually work it needs to be hosted on the the whitelisted domain set at Fastspring, however you should at least see a spinning white progress ball for a couple seconds in preview using Blocs, while it attempts to make a connection.

1 Like
10

Yep that’s what I get. I tested it with a link, which is what you seemed to have with your RW example and with the Bloc button. Same result.

I set the Interaction to Nav to URL #

11

I seem to have it working now on the website in a draft folder, though the interaction is set to none at present. No way to know for sure without creating a test purchase, but the pop up does appear there.

It does seem a bit convoluted doing this in Blocs and having to break it up like that into three parts. The documentation at Fastspring talks about just adding that single line of code when triggering the popup.

29

12

Its the way the CDA works, which makes handling long (lots of) data attributes actually very handy. The only thing I wish it did, was allow you to change the order.

Looks like RW just uses the custom class field to populate data-attributes.

lol… I have developed an infection in the edge of my nail on my right thumb and I can barely type… using the touch pad and especially right clicking its almost fail

13

Hello @Flashman and @PeteSharp, can I suggest something?

Why you don’t use this script in page definitions:

<script
    id="fsc-api"
    src="https://d1f8f9xcsvx3ha.cloudfront.net/sbl/0.8.2/fastspring-builder.min.js"
    type="text/javascript"
    data-storefront="example.onfastspring.com/popup-example">
</script>

And then add a code bric with this code?
<a class="btn btn-outline-primary" href="#" role="button" data-fsc-action="Add,Checkout" data-fsc-item-path-value="product-one">Buy Now</a>

It gives you something like this:

image
image1632Ă—588 199 KB

Try here…

14

Yes, I most likely would have done it that way myself @Pealco depending on design. He got it working last night though. Good to learn new things I’m Blocs.

15

And with icons as well like this:

image
image1632Ă—588 200 KB

And the code is like this:

<a class="btn btn-outline-primary bloc-button" href="#" role="button" data-fsc-action="Add,Checkout" data-fsc-item-path-value="product-one"><i class="fa fa-shopping-cart"></i>&nbsp; Buy Now</a>

But as you said is only a different way of achieve that as @Flashman already found a solution… But it is more difficult if you have many articles… I think… :slight_smile:

About design he can chose from this buttons, and from icons he can change from any icon in Fontawasome as we already speak earlier…

1 Like
16

I think you and I must use a ton of code brics :rofl:

Knowing how the CDA works is very helpful though.

1 Like
17

Yes it’s true… I think I can’t have any website without 1 code bric… :wink: or 2, or 3, or well there are a lot of code in my websites…

1 Like
18

I never claimed to be a close second place :grin:

1 Like
19

What do you mean by this???

20

Oh its slang. Meaning that we both use the code bric a lot, but you use it a lot more than me, even if you were 1st place and I was 2nd the gap would be big.

1 Like
21

Actually I have some weird problems and I think I need to contact Fastspring. Really strange is that if I click the Home page link from The About page up pops the store cart, but this only happens on the about page and that is part of the global menu. I shall try what @pealco suggested as well.

1 Like