Skip to content

Fixed widget snippets #54

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jgermade wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Fixed widget snippets #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions docs/api/10-widget/custom-styles/custom-styles.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ Para personalizar los estilos del widget vía CSS hay que incluir la opción `da
### Configurador

<WidgetSimulator
data-aplazame-widget-instalments=""
data-amount="22900"
data-country="ES"
data-currency="EUR"
Expand All @@ -40,5 +41,5 @@ Para personalizar los estilos del widget vía CSS hay que incluir la opción `da
data-option-branding="true"
data-option-downpayment-info="true"
data-option-title-smart="true"
data-option-legal-advice="true">
data-aplazame-widget-instalments</WidgetSimulator>
data-option-legal-advice="true"
/>
7 changes: 4 additions & 3 deletions docs/api/10-widget/installment-payment.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ sidebar_position: 1
data-view="product"></div>
```
<div className="widget-container">
<div data-aplazame-widget-instalments
<div data-aplazame-widget-instalments=""
data-amount="15900"
data-currency="EUR"
data-country="ES"
Expand Down Expand Up @@ -137,6 +137,7 @@ Ejemplo del snippet con valores:
### Configurador

<WidgetSimulator
data-aplazame-widget-instalments=""
data-amount="12900"
data-country="ES"
data-currency="EUR"
Expand All @@ -156,5 +157,5 @@ Ejemplo del snippet con valores:
data-option-url-more-info="https://www.aplazame.com"
data-option-url-more-info-hide-mobile="true"
data-option-default-instalments="6"
data-option-out-of-limits="hide">
data-aplazame-widget-instalments</WidgetSimulator>
data-option-out-of-limits="hide"
/>
2 changes: 1 addition & 1 deletion docs/api/10-widget/pay-in-4.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ En caso de que el merchant soporte el producto **'Pago en 4'**, se puede añadir

<div className="widget-container" style={{ minHeight: '110px' }}>
<div
data-aplazame-widget-instalments
data-aplazame-widget-instalments=""
data-amount="8000"
data-currency="EUR"
data-country="ES"
Expand Down
5 changes: 3 additions & 2 deletions docs/api/10-widget/pay-later.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,11 +47,12 @@ Si deseas configurar el widget de acuerdo a tus necesidades, puedes definir los
### Configurador

<WidgetSimulator
data-aplazame-widget-paylater=""
data-country="ES"
data-type="button"
data-option-text-color="#ff0000"
data-option-btn-text-color="#00ff00"
data-option-branding="true"
data-option-align="center">
data-aplazame-widget-paylater</WidgetSimulator>
data-option-align="center"
/>

5 changes: 3 additions & 2 deletions docs/api/10-widget/widget-v4/widget-v4.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ Si deseas configurar el widget de acuerdo a tus necesidades, puedes usar el conf
### Configurador

<WidgetSimulator
data-aplazame-widget-instalments="v4"
data-amount="14900"
data-country="ES"
data-currency="EUR"
Expand All @@ -81,5 +82,5 @@ Si deseas configurar el widget de acuerdo a tus necesidades, puedes usar el conf
data-option-legal-advice="true"
data-option-border-product="true"
data-option-primary-color="#334BFF"
data-option-max-amount-desired="false">
data-aplazame-widget-instalments="v4"</WidgetSimulator>
data-option-max-amount-desired="false"
/>
4 changes: 2 additions & 2 deletions docs/api/10-widget/widget-v5/widget-v5.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,11 +64,11 @@ Si deseas configurar el widget de acuerdo a tus necesidades, puedes usar el conf
### Configurador

<WidgetSimulator
data-aplazame-widget-instalments="v5"
data-amount="14900"
data-country="ES"
data-currency="EUR"
data-option-align="center"
data-option-legal-advice="true"
data-option-slider="true"
>
data-aplazame-widget-instalments="v5"</WidgetSimulator>
/>
5 changes: 3 additions & 2 deletions ...saurus-plugin-content-docs/current/api/10-widget/custom-styles/custom-styles.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ To customize the styles of the widget via CSS you must include the `data-option-
### Configurator

<WidgetSimulator
data-aplazame-widget-instalments=""
data-amount="22900"
data-country="ES"
data-currency="EUR"
Expand All @@ -41,5 +42,5 @@ To customize the styles of the widget via CSS you must include the `data-option-
data-option-branding="true"
data-option-downpayment-info="true"
data-option-title-smart="true"
data-option-legal-advice="true">
data-aplazame-widget-instalments</WidgetSimulator>
data-option-legal-advice="true"
/>
7 changes: 4 additions & 3 deletions ...en/docusaurus-plugin-content-docs/current/api/10-widget/installment-payment.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ keywords: [installments widget]
data-view="product"></div>
```
<div className="widget-container">
<div data-aplazame-widget-instalments
<div data-aplazame-widget-instalments=""
data-amount="15900"
data-currency="EUR"
data-country="ES"
Expand Down Expand Up @@ -140,6 +140,7 @@ Example of the snippet with values:
### Configurator

<WidgetSimulator
data-aplazame-widget-instalments=""
data-amount="12900"
data-country="ES"
data-currency="EUR"
Expand All @@ -159,5 +160,5 @@ Example of the snippet with values:
data-option-url-more-info="https://www.aplazame.com"
data-option-url-more-info-hide-mobile="true"
data-option-default-instalments="6"
data-option-out-of-limits="hide">
data-aplazame-widget-instalments</WidgetSimulator>
data-option-out-of-limits="hide"
/>
5 changes: 3 additions & 2 deletions i18n/en/docusaurus-plugin-content-docs/current/api/10-widget/pay-later.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,11 +46,12 @@ If you want to configure the widget according to your requirements you can use t
### Configurator

<WidgetSimulator
data-aplazame-widget-paylater=""
data-country="ES"
data-type="button"
data-option-text-color="#ff0000"
data-option-btn-text-color="#00ff00"
data-option-branding="true"
data-option-align="center">
data-aplazame-widget-paylater</WidgetSimulator>
data-option-align="center"
/>

5 changes: 3 additions & 2 deletions .../en/docusaurus-plugin-content-docs/current/api/10-widget/widget-v4/widget-v4.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ If you want to configure the widget according to your requirements you can use t
### Configurator

<WidgetSimulator
data-aplazame-widget-instalments="v4"
data-amount="14900"
data-country="ES"
data-currency="EUR"
Expand All @@ -85,5 +86,5 @@ If you want to configure the widget according to your requirements you can use t
data-option-legal-advice="true"
data-option-border-product="true"
data-option-primary-color="#334BFF"
data-option-max-amount-desired="false">
data-aplazame-widget-instalments="v4"</WidgetSimulator>
data-option-max-amount-desired="false"
/>
8 changes: 5 additions & 3 deletions .../en/docusaurus-plugin-content-docs/current/api/10-widget/widget-v5/widget-v5.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ There is the possibility of integrating a new version of the widget, for this, y
This version aims to simplify the integration for the installment payment widget.

<div className="widget-container">
<div data-aplazame-widget-instalments="v5"
<div
data-aplazame-widget-instalments="v5"
data-amount="3900"
data-option-legal-advice="false"
data-option-default-instalments="6"
Expand Down Expand Up @@ -68,10 +69,11 @@ If you want to configure the widget according to your requirements you can use t
### Configurator

<WidgetSimulator
data-aplazame-widget-instalments="v5"
data-amount="14900"
data-country="ES"
data-currency="EUR"
data-option-align="center"
data-option-legal-advice="true"
data-option-slider="true">
data-aplazame-widget-instalments="v5"</WidgetSimulator>
data-option-slider="true"
/>
37 changes: 24 additions & 13 deletions src/components/WidgetSimulator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,9 @@ class WidgetSimulator extends React.Component {

state = {
values: {
widgetType: this.props.children,
isPayLater: this.props['data-aplazame-widget-paylater'] === '',
version: this.props['data-aplazame-widget-instalments'] || '',
// widgetType: this.props.children,
amount: this.props['data-amount'],
country: this.props['data-country'],
type: this.props['data-type'],
Expand Down Expand Up @@ -51,7 +53,8 @@ class WidgetSimulator extends React.Component {
}

rawHTML = () => {
const text = `<div ${this.state.values.widgetType}
console.log('rawHTML --> ', this.props)
const text = `<div ${this.state.values.isPayLater ? 'data-aplazame-widget-paylater' : 'data-aplazame-widget-instalments="' + this.state.values.version + '"'}
${this.state.values.country ? 'data-country="' + this.state.values.country + '"' : ''}
${ 'data-amount="' + this.state.values.amount + '"' }
${this.state.values.type ? 'data-type="' + this.state.values.type + '"' : ''}
Expand Down Expand Up @@ -100,22 +103,28 @@ class WidgetSimulator extends React.Component {
}
})

const calculateWidgetType = (inputProps) => {
if (this.state.values.widgetType === 'data-aplazame-widget-instalments="v4"') {
inputProps['data-aplazame-widget-instalments'] = 'v4'
} else if (this.state.values.widgetType === 'data-aplazame-widget-instalments="v5"') {
inputProps['data-aplazame-widget-instalments'] = 'v5'
} else {
inputProps[this.state.values.widgetType] = ''
}
return inputProps
}
// const calculateWidgetType = (inputProps) => {
// if (this.state.values.widgetType === 'data-aplazame-widget-instalments="v4"') {
// inputProps['data-aplazame-widget-instalments'] = 'v4'
// } else if (this.state.values.widgetType === 'data-aplazame-widget-instalments="v5"') {
// inputProps['data-aplazame-widget-instalments'] = 'v5'
// } else {
// inputProps[this.state.values.widgetType] = ''
// }
// return inputProps
// }

let inputProps = {
...this.state.values.isPayLater && {
'data-aplazame-widget-paylater': ''
},
...!this.state.values.isPayLater && {
'data-aplazame-widget-instalments': this.state.values.version,
},
'data-pay-in-4' : this.state.values.optionPayIn !== undefined
}

inputProps = calculateWidgetType(inputProps)
// inputProps = calculateWidgetType(inputProps)

return (
<div>
Expand Down Expand Up @@ -434,6 +443,8 @@ class WidgetSimulator extends React.Component {
</div>
</section>

<br></br>

<CodeBlock language="html">{this.rawHTML()}</CodeBlock>
</div>
);
Expand Down