RSSAmplifier

Lokl · Nov 24, 2018

Getting Snipcart custom data attributes into WordPress + Elementor Pricing Table

0
Sign in to vote or save

lokl.dev

Nov 24, 2018

After shunning pagebuilders in WordPress long enough, I gave Elementor a try for a landing page layout and found it quite useful. I also realized how terribly far behind Gutenberg is!

So, Elementor got me 90% of the way there, as is often the case in WordPress - simple, until it isn’t!

Custom code in the theme’s functions.php got the last piece of the puzzle:

function wp2static_snipcart_callback($buffer) {
   $html_output = $buffer;
   $dom = new DOMDocument();
   $dom->loadHTML($html_output);
   $finder = new DomXPath($dom);
   $classname="elementor-price-table__button";
   $nodes = $finder->query("//*[contains(@class, '$classname')]");
   $yearly_buy_button = $nodes->item(1);
   $yearly_buy_button->setAttribute('class','elementor-price-table__button elementor-button elementor-size-md snipcart-add-item');
   $yearly_buy_button->setAttribute('data-item-name','PowerPack, unlimited sites, yearly');
   $yearly_buy_button->setAttribute('data-item-id','powerpack-unlimited-yearly');
   $yearly_buy_button->setAttribute('data-item-url','https://securityandperformance.com/');
   $yearly_buy_button->setAttribute('data-item-price','99.00');
   $yearly_buy_button->setAttribute('data-item-payment-interval','Year');
   $yearly_buy_button->setAttribute('data-item-payment-interval-count','1');
   $unlimited_buy_button = $nodes->item(2);
   $unlimited_buy_button->setAttribute('class','elementor-price-table__button elementor-button elementor-size-md snipcart-add-item');
   $unlimited_buy_button->setAttribute('data-item-name','PowerPack, unlimited sites, lifetime');
   $unlimited_buy_button->setAttribute('data-item-id','powerpack-unlimited-lifetime');
   $unlimited_buy_button->setAttribute('data-item-url','https://securityandperformance.com/');
   $unlimited_buy_button->setAttribute('data-item-price','299.00');
   return $dom->saveHTML();
}
add_filter( 'the_content', 'wp2static_snipcart_callback' );

// duplicate with wp_styles for loaded CSS in frontend function insite_inspect_scripts() { global $wp_scripts; echo PHP_EOL.''.PHP_EOL; }

add_action( ‘wp_print_scripts’, ‘insite_inspect_scripts’ );


[back](/)

Related categories:

Related tags:

Back to top

Read the original on lokl.dev

Comments

Nothing yet. Say the first thing.

    Sign in to join the conversation.