| 1 |
<?php |
| 2 |
|
| 3 |
use LassoLite\Classes\Enum; |
| 4 |
|
| 5 |
$show_price_attr = $lasso_options['show_price'] ? 'checked' : ''; |
| 6 |
$show_disclosure_attr = $lasso_options['show_disclosure'] ? 'checked' : ''; |
| 7 |
$enable_brag_mode_attr = 'checked'; |
| 8 |
?> |
| 9 |
|
| 10 |
<div class="tab-item d-none" data-step="display"> |
| 11 |
<div class="progressbar_container"> |
| 12 |
<ul class="progressbar"> |
| 13 |
<li class="step-get-started complete">Welcome</li> |
| 14 |
<li class="step-display-design active">Display Designer</li> |
| 15 |
<li class="step-amazon-info">Amazon Associates</li> |
| 16 |
<li class="step-connect-lasso">Connect to Lasso</li> |
| 17 |
<?php if ( $should_show_import_step ) : ?> |
| 18 |
<li class="step-import">Imports</li> |
| 19 |
<?php endif; ?> |
| 20 |
</ul> |
| 21 |
</div> |
| 22 |
|
| 23 |
<div class="onboarding_header text-center"> |
| 24 |
<h1>Display Designer</h1> |
| 25 |
<p class="pb-3">Don't worry, you can easily change all of these settings later.</p> |
| 26 |
</div> |
| 27 |
|
| 28 |
<div class="onboarding_display_container pb-3"> |
| 29 |
<div id="demo_display_box"> |
| 30 |
<div class="lasso-single" style="max-width: 750px; margin: 0 auto;"> |
| 31 |
<div class="single-view-wrap"> |
| 32 |
<div class="lasso-container lasso-lite"> |
| 33 |
<div class="lasso-display lasso-cactus"> |
| 34 |
<!-- BADGE --> |
| 35 |
<div class="lasso-badge">Our Pick</div> |
| 36 |
|
| 37 |
<!-- LASSO TITLE, PRICE, DESC, AND IMAGE --> |
| 38 |
<div class="lasso-box-1"> |
| 39 |
<a class="lasso-title">Essentialism: The Disciplined Pursuit of Less</a> |
| 40 |
|
| 41 |
<div class="lasso-stars" style="--rating: 4.5"> |
| 42 |
<span class="lasso-stars-value"> 4.5 </span> |
| 43 |
</div> |
| 44 |
|
| 45 |
<div class="lasso-price"> |
| 46 |
<div class="lasso-price-value"><span class="discount-price"><strike>$18.99</strike></span><span class="latest-price">$15.99</span></div> |
| 47 |
<i class="lasso-amazon-prime"></i> |
| 48 |
</div> |
| 49 |
<div class="clear"></div> |
| 50 |
<!-- DESCRIPTION --> |
| 51 |
<div class="lasso-description"> |
| 52 |
The Way of the Essentialist isn't about getting more done in less time. It's not about getting less done. It's about getting only the right things done. It's about the pursuit of the right thing, in the right way, at the right time. |
| 53 |
</div> |
| 54 |
|
| 55 |
<div class="lasso-fields"> |
| 56 |
<div class="lasso-fields-pros lasso-fields-2"> |
| 57 |
<strong>Pros:</strong> |
| 58 |
<ul> |
| 59 |
<li><span class="lasso-check"><span class="lasso-check-content"></span></span>Will make you more effective.</li> |
| 60 |
<li><span class="lasso-check"><span class="lasso-check-content"></span></span>Quick read and highly actionable.</li> |
| 61 |
</ul> |
| 62 |
</div> |
| 63 |
<div class="lasso-fields-cons lasso-fields-3"> |
| 64 |
<strong>Cons:</strong> |
| 65 |
<ul> |
| 66 |
<li><span class="lasso-x"><span class="lasso-x-1"></span><span class="lasso-x-2"></span></span>You have to be open minded.</li> |
| 67 |
</ul> |
| 68 |
</div> |
| 69 |
</div> |
| 70 |
</div> |
| 71 |
|
| 72 |
<div class="lasso-box-2"> |
| 73 |
<a class="lasso-image"> |
| 74 |
<img src="<?php echo SIMPLE_URLS_URL . '/admin/assets/images/displays/essentialism.jpg'; ?>" height="500" width="500"> |
| 75 |
</a> |
| 76 |
</div> |
| 77 |
|
| 78 |
<!-- BUTTONS --> |
| 79 |
<div class="lasso-box-3"> |
| 80 |
<a class="lasso-button-1">Buy Now</a> |
| 81 |
</div> |
| 82 |
|
| 83 |
<div class="lasso-box-4"> |
| 84 |
<a class="lasso-button-2">Our Review</a> |
| 85 |
</div> |
| 86 |
|
| 87 |
<!-- DISCLOSURE & DATE --> |
| 88 |
<div class="lasso-box-5"> |
| 89 |
<div class="lasso-disclosure">We earn a commission if you make a purchase, at no additional cost to you.</div> |
| 90 |
</div> |
| 91 |
|
| 92 |
<div class="lasso-box-6"> |
| 93 |
<div class="lasso-date">June 30, 2022 5:41 am UTC <i class="lasso-amazon-info" data-tooltip="Price and availability are accurate as of the date and time indicated and are subject to change."></i> |
| 94 |
</div> |
| 95 |
</div> |
| 96 |
</div> |
| 97 |
</div> |
| 98 |
</div> |
| 99 |
</div> |
| 100 |
</div> |
| 101 |
<div class="image_loading onboarding d-none"></div> |
| 102 |
</div> |
| 103 |
|
| 104 |
<form class="lasso-lite-admin-settings-form" autocomplete="off"> |
| 105 |
<input type="hidden" name="theme_name" value="<?php echo Enum::THEME_CACTUS; ?>" /> |
| 106 |
<div class="row"> |
| 107 |
<div class="col-lg-6 mb-lg-0 mb-5 h-100"> |
| 108 |
<div class="form-group"> |
| 109 |
<div class="form-row mb-4"> |
| 110 |
<div class="col-lg"> |
| 111 |
<label data-tooltip="This is the color of your badge background."><strong>Badge</strong> <i class="far fa-info-circle light-purple"></i></label> |
| 112 |
<input type="text" name="display_color_main" value="<?php echo $lasso_options['display_color_main']; ?>" class="form-control color-picker" placeholder="#5E36CA" /> |
| 113 |
</div> |
| 114 |
|
| 115 |
<div class="col-lg"> |
| 116 |
<label data-tooltip="This is the color of the title text of your display."><strong>Title</strong> <i class="far fa-info-circle light-purple"></i></label> |
| 117 |
<input type="text" name="display_color_title" value="<?php echo $lasso_options['display_color_title']; ?>" class="form-control color-picker" placeholder="#FFFFFF" /> |
| 118 |
</div> |
| 119 |
</div> |
| 120 |
|
| 121 |
<div class="form-row mb-4"> |
| 122 |
<div class="col-lg"> |
| 123 |
<label data-tooltip="This is the color of the inside of your display."><strong>Background</strong> <i class="far fa-info-circle light-purple"></i></label> |
| 124 |
<input type="text" name="display_color_background" value="<?php echo $lasso_options['display_color_background']; ?>" class="form-control color-picker" placeholder="#FFFFFF" /> |
| 125 |
</div> |
| 126 |
|
| 127 |
<div class="col-lg"> |
| 128 |
<label data-tooltip="This is text color for your badges and buttons."><strong>Button + Badge Text</strong> <i class="far fa-info-circle light-purple"></i></label> |
| 129 |
<input type="text" name="display_color_button_text" value="<?php echo $lasso_options['display_color_button_text']; ?>" class="form-control color-picker" placeholder="#FFFFFF" /> |
| 130 |
</div> |
| 131 |
</div> |
| 132 |
|
| 133 |
<div class="form-row mb-4"> |
| 134 |
<div class="col-lg lasso-lite-disabled"> |
| 135 |
<label data-tooltip="This is the main color of the Pros Field."><strong>Pros</strong> <i class="far fa-info-circle light-purple"></i></label> |
| 136 |
<input type="text" name="display_color_pros" value="<?php echo $lasso_options['display_color_pros']; ?>" class="form-control color-picker" placeholder="#FFFFFF" disabled /> |
| 137 |
</div> |
| 138 |
|
| 139 |
<div class="col-lg lasso-lite-disabled"> |
| 140 |
<label data-tooltip="This is the main color of the Cons Field."><strong>Cons</strong> <i class="far fa-info-circle light-purple"></i></label> |
| 141 |
<input type="text" name="display_color_cons" value="<?php echo $lasso_options['display_color_cons']; ?>" class="form-control color-picker" placeholder="#FFFFFF" disabled /> |
| 142 |
</div> |
| 143 |
</div> |
| 144 |
|
| 145 |
<div class="form-row"> |
| 146 |
<div class="col-lg-6"> |
| 147 |
<label class="toggle m-0 mr-1"> |
| 148 |
<input type="checkbox" id="show_price" name="show_price" <?php echo $show_price_attr; ?> > |
| 149 |
<span class="slider"></span> |
| 150 |
</label> |
| 151 |
<label data-tooltip="Turn this on to show the price in Displays by default. You can override this per display.">Show Price <i class="far fa-info-circle light-purple"></i></label> |
| 152 |
</div> |
| 153 |
|
| 154 |
<div class="col-lg-6"> |
| 155 |
<label class="toggle m-0 mr-1"> |
| 156 |
<input type="checkbox" id="show_disclosure" name="show_disclosure" <?php echo $show_disclosure_attr; ?> > |
| 157 |
<span class="slider"></span> |
| 158 |
</label> |
| 159 |
<label data-tooltip="Turn this on to show the disclosure in Displays by default. You can override this per display.">Show Disclosure <i class="far fa-info-circle light-purple"></i></label> |
| 160 |
</div> |
| 161 |
</div> |
| 162 |
</div> |
| 163 |
</div> |
| 164 |
|
| 165 |
<div class="col-lg-6 mb-lg-0 mb-5 h-100"> |
| 166 |
<div class="form-row mb-4"> |
| 167 |
<div class="col-lg"> |
| 168 |
<label data-tooltip="If you leave your display button text blank, this is what it will default to."><strong>Primary Button</strong> <i class="far fa-info-circle light-purple"></i></label> |
| 169 |
<input type="text" name="primary_button_text" value="<?php echo $lasso_options['primary_button_text']; ?>" class="form-control" placeholder="Buy Now" /> |
| 170 |
</div> |
| 171 |
|
| 172 |
<div class="col-lg"> |
| 173 |
<label data-tooltip="This is the color of your display's main CTA button."> </label> |
| 174 |
<input type="text" name="display_color_button" value="<?php echo $lasso_options['display_color_button']; ?>" class="form-control color-picker" placeholder="#22BAA0" /> |
| 175 |
</div> |
| 176 |
</div> |
| 177 |
|
| 178 |
<div class="form-row mb-4"> |
| 179 |
<div class="col-lg lasso-lite-disabled"> |
| 180 |
<label data-tooltip="If you set a secondary button for your display and leave it blank, this is what it will default to."><strong>Secondary Button</strong> <i class="far fa-info-circle light-purple"></i></label> |
| 181 |
<input type="text" name="secondary_button_text" value="<?php echo $lasso_options['secondary_button_text']; ?>" class="form-control" placeholder="Learn More" disabled /> |
| 182 |
</div> |
| 183 |
|
| 184 |
<div class="col-lg lasso-lite-disabled"> |
| 185 |
<label data-tooltip="This is the color of your display's secondary CTA button."> </label> |
| 186 |
<input type="text" name="display_color_secondary_button" value="<?php echo $lasso_options['display_color_secondary_button']; ?>" class="form-control color-picker" placeholder="#22BAA0" disabled /> |
| 187 |
</div> |
| 188 |
</div> |
| 189 |
|
| 190 |
<div class="form-row mb-1"> |
| 191 |
<div class="col-lg lasso-lite-disabled"> |
| 192 |
<label data-tooltip="This is the default disclosure text used with your displays."><strong>Disclosure</strong> <i class="far fa-info-circle light-purple"></i></label> |
| 193 |
<textarea class="form-control" rows="4" disabled><?php echo $lasso_options['disclosure_text']; ?></textarea> |
| 194 |
</div> |
| 195 |
<div class="col-lg"> |
| 196 |
<div> |
| 197 |
<label data-tooltip="Earn money sharing Lasso with our affiliate program."><span>Brag Mode</span> <i class="far fa-info-circle light-purple"></i></label> |
| 198 |
<input name="lasso_affiliate_URL" type="text" class="form-control mb-4" placeholder="Your Lasso Affiliate URL" value="<?php echo esc_attr( $lasso_options['lasso_affiliate_URL'] ); ?>"> |
| 199 |
</div> |
| 200 |
<div class="no-hint"> |
| 201 |
<label class="toggle m-0 mr-1"> |
| 202 |
<input name="enable_brag_mode" type="checkbox" <?php echo $enable_brag_mode_attr; ?>> |
| 203 |
<span class="slider"></span> |
| 204 |
</label> |
| 205 |
<label class="m-0">Enable Brag Mode</label> |
| 206 |
</div> |
| 207 |
</div> |
| 208 |
</div> |
| 209 |
</div> |
| 210 |
</div> |
| 211 |
</form> |
| 212 |
|
| 213 |
<!-- SAVE CHANGES --> |
| 214 |
<div class="row align-items-center mt-4"> |
| 215 |
<div class="col-lg text-lg-right text-center"> |
| 216 |
<button id="onboarding-save-display-btn" class="btn next-step">Save and Continue →</button> |
| 217 |
</div> |
| 218 |
</div> |
| 219 |
</div> |
| 220 |
|
