Jump to content

New Digital Product Blocks & Trickery

Go to solution Solved by cro0w,

Recommended Posts

Hello,

I'm wondering if the the following is possible:

1. I was working on a implementing digital products to be able to sell a Basic and a Premium Membership. When creating the products you can basically very restrictively "design" what it looks like. However you can't change the way the pricing is shown.
 

image.thumb.png.199a727f4b0d06c19bd44a295ee68a64.png

What we want is basically to be able to have Premium Members pay an annual subscription, but we want the pricing to show as $8.99 per month VS $107 every year. 

Since this is calling information for the sever, I'm assuming you can just change the works with CSS. Is there a work around?

2. Our workaround was to recreate the pricing table using regular block elements and then just link the button to the User Creating + Premium Member sign up. 

image.thumb.png.73f1f3e5cbe78441108fe28a730184d8.png

Question is, how do we link the buttons so that they behave like the digital products do and pop up the right window for the users?

image.png.5bfccffd31bf24a243917430eebf0990.png

 

Thank you in advance for any wisdom anyone can share. Cheers!

If you'd like to access the testing page go to: https://www.livelitebylinda.com/membership PW: 123

Edited by cro0w
Mod got mad...
Link to comment
  • Replies 1
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • Solution

I ended up figuring out a method to get a button to to what I want. Felt kind of dumb once I came up with the solution. 

To be able to get a semi-custom experience when creating digital products  pages and working on the blocks themselves, I found Squarespace's blocks to restrictive so making them from scratch made sense. 

Then I added a code block made my button, inspected my own website and copy pasted my own instructions.

image.thumb.png.2b8d3ac381572c5b56929ef600a0bedd.png

The button has the same functionally tied to the membership/digital products.

<button class="sqs-editable-button join-button sqs-button-element--primary " onclick="UserAccountApi.joinPricingPlan('9cb84188-461b-4602-97a5-42c879f31a37', '9ddb2a9a-9db9-4472-8c0a-f683e030d0c4', '', false, 'MEMBER_AREA_BLOCK', {&quot;pricingPlanId&quot;:&quot;9cb84188-461b-4602-97a5-42c879f31a37&quot;,&quot;alignment&quot;:&quot;left&quot;,&quot;showTitle&quot;:true,&quot;showDescription&quot;:true,&quot;showPrice&quot;:true,&quot;showJoinButton&quot;:true,&quot;showBenefits&quot;:true,&quot;joinButtonText&quot;:&quot;Sign up&quot;,&quot;title&quot;:&quot;Premium Members&quot;,&quot;description&quot;:&quot;Grab your apron and join Linda LIVE every third Sunday of the month at 7:30 pm EST.&quot;,&quot;benefits&quot;:[{&quot;description&quot;:&quot;12 online cooking classes with Linda&quot;},{&quot;description&quot;:&quot;Over 13 hours of video content&quot;},{&quot;description&quot;:&quot;Watch on your computer, phone or TV&quot;},{&quot;description&quot;:&quot;PDF download of all recipes. &quot;},{&quot;description&quot;:&quot;Newsletter with tips, tricks and recipes&quot;}],&quot;pricingOptions&quot;:[{&quot;id&quot;:&quot;9ddb2a9a-9db9-4472-8c0a-f683e030d0c4&quot;,&quot;price&quot;:{&quot;currency&quot;:&quot;CAD&quot;,&quot;value&quot;:&quot;107.00&quot;},&quot;billingPeriod&quot;:{&quot;value&quot;:12,&quot;unit&quot;:&quot;MONTH&quot;},&quot;numBillingCycles&quot;:0}],&quot;pricingType&quot;:&quot;RECURRING&quot;,&quot;isPaywall&quot;:true,&quot;firstPricingOptionId&quot;:&quot;9ddb2a9a-9db9-4472-8c0a-f683e030d0c4&quot;,&quot;firstPricingOptionPriceAmount&quot;:&quot;$107.00&quot;,&quot;firstPricingOptionPriceBillingPeriod&quot;:&quot;Every year&quot;,&quot;hasMultiplePricingOptions&quot;:false,&quot;blockId&quot;:&quot;59e2abecd70b84061f5b&quot;,&quot;estimatedDimensions&quot;:{&quot;estimatedColumnSpanDesktop&quot;:7,&quot;sectionColumnsDesktop&quot;:24,&quot;estimatedColumnSpanMobile&quot;:8,&quot;sectionColumnsMobile&quot;:8},&quot;localizedStrings&quot;:{&quot;pricingOptionToggleMonthly&quot;:{&quot;one&quot;:&quot;Monthly&quot;,&quot;other&quot;:&quot;{0} Months&quot;},&quot;paywallPriceFiniteMonthly&quot;:{&quot;other&quot;:&quot;For {0} months&quot;},&quot;paywallPriceMonthly&quot;:{&quot;one&quot;:&quot;Every month&quot;,&quot;other&quot;:&quot;Every {0} months&quot;},&quot;pricingOptionToggleWeekly&quot;:{&quot;other&quot;:&quot;{0} Weeks&quot;,&quot;one&quot;:&quot;Weekly&quot;},&quot;pricingOptionToggleYearly&quot;:{&quot;one&quot;:&quot;Yearly&quot;},&quot;paywallPriceFiniteWeekly&quot;:{&quot;other&quot;:&quot;For {0} weeks&quot;},&quot;paywallPriceOTP&quot;:&quot;One time&quot;,&quot;joinButtonLabel&quot;:&quot;Join&quot;,&quot;pricingOptionToggleInstallments&quot;:{&quot;other&quot;:&quot;{0} Payments&quot;},&quot;pricingOptionToggleOneTimePayment&quot;:&quot;1 Payment&quot;,&quot;paywallPriceWeekly&quot;:{&quot;one&quot;:&quot;Every week&quot;,&quot;other&quot;:&quot;Every {0} weeks&quot;},&quot;zeroPriceLabel&quot;:&quot;Free&quot;,&quot;paywallPriceYearly&quot;:{&quot;one&quot;:&quot;Every year&quot;}},&quot;featureFlags&quot;:{&quot;useCLDRMoneyFormat&quot;:true}})" data-test="pricing-plan-block-join" id="yui_3_17_2_1_1696276073968_301" tabindex="0">
        <div class="sqs-add-to-cart-button-inner" id="yui_3_17_2_1_1696276073968_311">
          
            Sign Up Now
          
        </div>
      </button>

Obviously, don't use mine, make sure to inspect your own site to get the right ID.

Hope this helps someone!

Cheers,

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.